<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="10" :order="1" class="tool-action">
                    <a-input-search placeholder="请输入关键词,例如:姓名/手机号" v-model="params.key" @search="onSearch" style="width:400px;">
                        <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
                    </a-input-search>
                </a-col>
                <a-col :span="14" :order="2" class="tool-pagination">
<!--                    <a-button type="primary" icon="plus" @click="onAdd()">新增</a-button>-->
                </a-col>
            </a-row>
            <a-table bordered :columns="columns"  :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template  slot="index"  slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="nickName" slot-scope="text,record">
                  <div class="member clearfix">
                    <div>
                      <img v-if="record.headImgUrl && record.headImgUrl!='' " :src="record.headImgUrl" />
                      <img v-else src="@/assets/images/mainImage.jpg" />
                    </div>
                    <div class="info">
                      <p>{{record.nickName}}</p>
                    </div>
                  </div>
                </template>
                <template slot="amount" slot-scope="text,record">
                    {{fmMoney(record.consumptionAmount,2,true)}}
                </template>
                <template slot="birthDay" slot-scope="text,record">
                  <p v-if="record.birthDay">{{record.birthDay}}</p>
                  <span v-else> -- </span>
                </template>
                <template slot="isVip" slot-scope="memberId">
                  <a-tag color="orange" v-if="memberId">36元会员</a-tag>
                  <span v-else> -- </span>
                </template>
                <template slot="createAt" slot-scope="createAt">
                    {{parseTime(createAt,'yyyy-MM-dd HH:mm:ss')}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onShow(record)"  class="ant-btn-text"><a-icon type="search" /></a>
                    <a-divider type="vertical" />
                    <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                    <a-pagination  :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
      <a-drawer title="会员详情" :width="720" @close="onClose"
                :visible="visible"
                :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
      >
        <member-detail :model="model" v-if="visible"></member-detail>
      </a-drawer>
    </div>
</template>
<script>
    import {findWxUserList,deletedWxUser} from "../../api/member";
    import {fmMoney,parseTime} from "../../utils";
    import { MemberDetail} from "./components";

    const columns = [
      {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
      {title: '昵称',dataIndex: 'nickName',align:'left',scopedSlots: { customRender: 'nickName' }},
      {title: '姓名',dataIndex: 'realName',align:'left'},
      {title: '联系电话',dataIndex: 'phone',align:'center',width:130,scopedSlots: { customRender: 'phone' }},
      {title: '生日',dataIndex: 'birthDay',align:'center',width:130},
      {title: '消费金额',dataIndex: 'saleAmount',align:'center', width:150,scopedSlots: { customRender: 'amount' }},
      {title: '是否VIP',dataIndex: 'isVip',align:'center', width:120,scopedSlots: { customRender: 'isVip' }},
      {title: '注册时间',dataIndex: 'createAt',width: 170,align:'center',scopedSlots: { customRender: 'createAt' }},
      {title: '操作',key: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}];
    export default {
      components: {MemberDetail},
      data() {
        return {
          columns,
          dataList: [],
          params: {
            key: '',
            current: 1,
            pageSize: 10,
            sorter: {
              field: '',
              order: '',
            },
          },
          total: 0,
          loading: false,
          visible: false,
          model:null
        }
      },
      methods: {
        fmMoney,
        parseTime,
        onClose() {
          this.visible = false;
        },
        onSearch() {
          this.params.current = 1;
          this.onLoad();
        },
        onChange(current) {
          this.params.current = current;
          this.onLoad();
        },
        onShow(item) {
          this.model = item;
          this.visible = true;
        },
        //删除
        onDeleted(id) {
          let _this = this;
          this.$confirm({
            title: '确认删除该会员信息吗?',
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              _this.handleDelete(id);
            },
            onCancel() {
            },
          });
        },
        async handleDelete(id) {
          let resp = await deletedWxUser(id);
          if (this.qUtil.validResp(resp)) {
            this.$success({title: '删除成功!', okText: '确定'});
            this.onLoad();
          } else {
            this.$error({title: '删除失败!', okText: '确定'});
          }
        },
        async onLoad() {
          this.loading = true;
          let resp = await findWxUserList(this.params);
          this.loading = false;
          if (!this.qUtil.validResp(resp)) return false;
          this.total = resp.data.total;
          this.dataList = resp.data.dataList;
          console.log("===>resp==user", resp.data.dataList);
        }
      },
      mounted() {
        this.onLoad();
      }
    }
</script>
<style scoped>
  .member{
    text-align: left;
  }
  .member div{
    float:left;
  }
  .member img{
    width:50px;
    height:50px;
  }
  .member .info{
    margin-left:10px;
    text-align: left;
    line-height: 1.8;
  }
</style>
